<script setup lang="ts" >
import { ref } from 'vue';

let size = ref(localStorage.getItem('size') || 'default')

const changeSize = (data: { handle: string }): void => {
    localStorage.setItem('size', data.handle)
    size.value = data.handle
    emit('emitSize', data.handle)
}
const emit = defineEmits<{ (e: 'emitSize', size: string): void }>()//定义的传值的方法
// const clickThis = () => {
//     emit('click',2)
//   }
</script>
<!-- 修改尺寸的组件 -->
<template>
    <div>
        <el-dropdown trigger="click" @command="changeSize">
            <i class="iconfont icon-wenzi" style="font-size:25px"></i>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item :disabled="size=='small'" :command="{ handle: 'small' }">
                        {{ $t('size.small') }}
                    </el-dropdown-item>
                    <el-dropdown-item :disabled="size=='default'" :command="{ handle: 'default' }" >
                        {{ $t('size.default') }}
                    </el-dropdown-item>
                    <el-dropdown-item :disabled="size=='large'" :command="{ handle: 'large' }" >
                        {{ $t('size.large') }}
                    </el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
</template>

<style scoped lang="less">

</style>
